<html>
<head>
<title>Now Share in Realtime with your group and get instant replies</title>
<script type="text/javascript" src="jq/jquery-1.3.2.js"></script>
<meta name="google-site-verification" content="ouJSth3uq0lkdIQJc1Ktx2yJkjj37DGSZAwaJRWU_fo" />
<link rel="stylesheet" href="jq/themes/base/ui.all.css" />
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-large;
	color: #FFFFFF;
}
.style2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #666666;
	font-weight: bold;
}
.style3 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: xx-large;
	color: #333333;
}
.style4 {font-size: x-small}
.style5 {
	color: #999999;
	font-weight: bold;
}
.style6 {color: #6600CC}
.style7 {font-size: x-large}
.style8 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #333333;
	font-weight: bold;
}
-->
</style>

<script type="text/javascript">
function sendInvite()
{
username = document.form.email.value;
$.get('/invite',{ email: username }, function(data) {
  $('#invitation').html(data);
});
}
</script>
<script type="text/javascript">
function createGroup()
{
admin = document.forms[0].admin.value;
password = document.forms[0].password.value;
groupName = document.forms[0].groupName.value;
document.getElementById('groupCreation').innerHTML = 'Creating Please Wait.....';
$.get('/createGroup',{ administrator: admin, groupName: groupName, password: password }, function(data) {
  $('#groupCreation').html(data);
});
}
</script>
<script type="text/javascript">
$.get('/getPublicGroups',{ limit:'4' }, function(data) {
  $('#publicGroups').html(data);
});
</script>
</head>

<body>
<table width="100%" border="0" class="ui-widget-content ui-corner-all">
  <tr>
    <td height="163" bgcolor="#0099FF" class="ui-corner-all" colspan="2"><p>&nbsp;</p>
    <p>&nbsp;</p>
    <p align="center"><span class="style1">Group Shout in Gtalk. Create private group or join public group n enjoy.</span></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td height="259" class="ui-accordion-content-active"><table width="100%" height="100%">
      <tr>
        <td class="ui-widget-content ui-corner-all" width="58%"><p class="style2">You shout from your chat client like Gtalk or others <span class="style4">(<a href="http://xmpp.org/software/clients.shtml" title="Supported Clients to Shout" target="_blank">Show list of supported clients</a>)</span>.</p>
          <p class="style2">          
          <p class="style2">
          <form action="" method="get">
			  <table width="100%">
			  <caption class="style2" align="left">Create your own Group<br>
			  </caption>
                <tr>
                  <td width="59%">Group Name </td>
                  <td width="32%"><label for="textfield"></label>
                  <input type="text" name="groupName" id="groupName" class="ui-widget-content"></td>
                  <td width="9%">&nbsp;</td>
                </tr>
                <tr>
                  <td>Password (type<span class="style6"> public </span>for public group) </td>
                  <td><input type="text" name="password" id="password" class="ui-widget-content"></td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>Admin ID (enter your mailID here) </td>
                  <td><input type="text" name="admin" id="admin" class="ui-widget-content"></td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td><label for="Submit"></label>
                  <input type="button" name="Create Group" value="Create Group" class="ui-widget-content ui-state-hover" onClick="createGroup()"></td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
              </table>
			</form>
		  <div id="groupCreation" class="ui-state-error-text"></div>
		  </td>
      </tr>
    </table>
		  </td>
		  <td width="42%" class="ui-widget-content ui-corner-all"><p class="style3 style7">Public Groups :</p>
		    <div class="style2 ui-state-error-text" id="publicGroups">Loading...Please Wait..............</div><br><a href="/getAllGroups?limit=100" target="_blank" class="style8">Show all groups</a>
		    <hr>
			<p class="style2">Not received invitation from any group yet ? You can join a public group or create own group. To join a public group first invite yourself by entering your mailID here </p>
            <form id="form" name="form" method="post" action="">
            <center>
              <p>
                <input name="email" type="text" class="ui-widget-content style2 style3" id="email" size="25"/>
              </p>
              <p class="style2">
                <label for="Submit"></label>
                <input type="button" name="Button" value="Send Invite" class="ui-widget-content style2 ui-state-hover" onClick="sendInvite()" />
              </p>
            </center>
          </form>
          <p><div id="invitation" class="ui-state-error-text"></div></p>	</td>
  </tr>
  <tr>
    <td class="ui-widget-content ui-corner-all ui-state-default" colspan="2"><b>To Join a group send <span class="style6">/join groupName password</span> to our bot.Password for public groups is<span class="style6">public</span>. To leave the joined group send <span class="style6">/leave</span>. You can join only one group at a time.
      By default you are placed in group 'global'.
        <div id="olCount" class="ui-state-error-text"></div>
    </b> </td>
  </tr>
  <tr>
    <td height="30%" colspan="2"><div align="center" class="ui-state-highlight">
      <p>&nbsp;</p>
      <p class="style5">This is a BETA release of INSTANT SHOUT.Features such as notification control and personalized settings will be added shortly.Please send your suggestions in chat only. </p>
    </div></td>
  </tr>
</table>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-9944884-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>
